<template>
  <pro-page>
    <p>宽度：{{ width }}</p>
    <p>结果：{{ result }}</p>
    <ProContainerQuery
      :query="{
        'width-between-400-and-599': {
          minWidth: 400,
          maxWidth: 599
        },
        'width-larger-than-600': {
          minWidth: 600
        }
      }"
      @resize="handleResize">
      <div ref="resize" style="text-align:center;background: red">Test: ContainerQuery</div>
    </ProContainerQuery>
  </pro-page>
</template>

<script>
import { ProContainerQuery } from '@hczy/ant-design-vue'

export default {
  name: 'DemoContainerQuery',
  components: {
    ProContainerQuery
  },
  data() {
    return {
      result: {},
      width: 0
    }
  },
  methods: {
    handleResize(result, { width }) {
      this.result = result
      this.width = width
    }
  }
}
</script>
